const express = require('express');
const fs = require('fs');
const path = require('path');

const app = express();
const PORT = 3000;
const SVG_FOLDER = 'svg'; // 存放SVG的文件夹名称

// 确保svg文件夹存在
if (!fs.existsSync(SVG_FOLDER)) {
    fs.mkdirSync(SVG_FOLDER);
    console.log(`已创建 ${SVG_FOLDER} 文件夹，请将SVG文件放入其中`);
}

// 设置静态文件目录
app.use(express.static(SVG_FOLDER));

// 主页路由 - 显示所有SVG图片
app.get('/', (req, res) => {
    fs.readdir(SVG_FOLDER, (err, files) => {
        if (err) {
            console.error(err);
            return res.status(500).send('无法读取SVG文件夹');
        }

        // 过滤出SVG文件
        const svgFiles = files.filter(file => path.extname(file).toLowerCase() === '.svg');

        if (svgFiles.length === 0) {
            return res.send(`
                <!DOCTYPE html>
                <html>
                <head>
                    <title>SVG 查看器</title>
                    <style>
                        body { font-family: Arial, sans-serif; margin: 20px; }
                        .container { max-width: 800px; margin: 0 auto; text-align: center; }
                        .message { padding: 20px; background: #f0f0f0; border-radius: 5px; }
                    </style>
                </head>
                <body>
                    <div class="container">
                        <h1>SVG 查看器</h1>
                        <div class="message">
                            <p>${SVG_FOLDER} 文件夹中没有找到SVG文件</p>
                            <p>请将SVG文件放入项目目录下的 ${SVG_FOLDER} 文件夹中</p>
                        </div>
                    </div>
                </body>
                </html>
            `);
        }

        // 生成HTML页面
        let html = `
            <!DOCTYPE html>
            <html>
            <head>
                <title>SVG 查看器</title>
                <style>
                    body { font-family: Arial, sans-serif; margin: 20px; }
                    .container { max-width: 1200px; margin: 0 auto; }
                    h1 { text-align: center; }
                    .svg-grid { 
                        display: grid; 
                        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
                        gap: 20px; 
                        margin-top: 20px;
                    }
                    .svg-item { 
                        border: 1px solid #ddd; 
                        padding: 10px; 
                        border-radius: 5px; 
                        text-align: center;
                        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
						background-color: rgba(0,0,0,.5)
                    }
                    .svg-item img { 
                        max-width: 100%; 
                        height: auto; 
                        max-height: 200px;
                    }
                    .svg-name { 
                        margin-top: 10px; 
                        font-weight: bold; 
                        word-break: break-all;
                    }
                    .header { 
                        display: flex; 
                        justify-content: space-between; 
                        align-items: center; 
                        margin-bottom: 20px;
                    }
                    .refresh-btn {
                        padding: 8px 16px;
                        background: #4CAF50;
                        color: white;
                        border: none;
                        border-radius: 4px;
                        cursor: pointer;
                    }
                    .refresh-btn:hover {
                        background: #45a049;
                    }
                </style>
            </head>
            <body>
                <div class="container">
                    <div class="header">
                        <h1>SVG 查看器</h1>
                        <button class="refresh-btn" onclick="window.location.reload()">刷新</button>
                    </div>
                    <p>共找到 ${svgFiles.length} 个SVG文件</p>
                    <div class="svg-grid">
        `;

        // 为每个SVG文件添加一个项目
        svgFiles.forEach(file => {
            html += `
                <div class="svg-item">
                    <img src="/${file}" alt="${file}" />
                    <div class="svg-name">${file}</div>
                </div>
            `;
        });

        html += `
                    </div>
                </div>
            </body>
            </html>
        `;

        res.send(html);
    });
});

// 启动服务器
app.listen(PORT, () => {
    console.log(`服务器运行在 http://localhost:${PORT}`);
    console.log(`请将SVG文件放入项目目录下的 ${SVG_FOLDER} 文件夹中`);
});